<template>
    <div
        class="w-full h-full flex flex-row flex-none duration-300 transition-transform"
        :style="{ transform: `translateX(-${right})` }"
    >
        <!-- 缩略图 -->
        <div class="h-12 w-12 m-2 border bg-white overflow-hidden rounded">
            <img :src="layer.image" />
        </div>
        <!-- 图层名称及透明度 -->
        <div class="flex flex-col justify-center">
            <span>{{ layer.name }}</span>
            <span class="text-sm">{{ Math.floor(layer.alpha * 100) }}%</span>
        </div>
        <!--  锁 -->
        <div class="flex flex-row items-center justify-evenly flex-grow">
            <Icon
                class="icon hover:bg-zinc-500"
                @click="changeLock"
            >{{ layer.userLock ? "lock_outline" : "lock_open" }}</Icon>
            <Icon
                class="icon hover:bg-zinc-500"
                @click="changeVisible"
            >{{ layer.visible ? "visibility" : "visibility_off" }}</Icon>
            <Icon
                class="icon hover:bg-zinc-500"
                @click="toggleDrawer"
            >{{ needDrawer ? "keyboard_double_arrow_left" : "keyboard_double_arrow_right" }}</Icon>
        </div>
    </div>
    <!--  需要时渲染侧边栏 -->
    <div
        class="flex flex-row items-center p-2 duration-300 bg-zinc-500 transition-transform"
        v-if="needDrawer"
        :style="{ transform: `translateX(-${right})` }"
        ref="drawer"
    >
        <Icon class="icon hover:bg-zinc-600">ios_share</Icon>
        <Icon class="icon hover:bg-zinc-600">content_copy</Icon>
        <Icon class="icon hover:bg-zinc-600" @click="deleteLayer">delete</Icon>
    </div>
</template>
<style scoped>
.icon {
    @apply text-lg  transition-colors p-2 rounded-lg;
}
</style>
<script lang="ts" setup>
import { DataOfLayer, useControllerStore } from '../Controller/Controller';
import Icon from '@konghayao/vue-material-icons'
import { nextTick, ref } from 'vue'

const props = defineProps<{
    layer: DataOfLayer
}>()
// 打开抽屉的设定
const drawer = ref<HTMLElement | null>(null)
const right = ref('0')
const needDrawer = ref(false)
let open = ref(false)
const toggleDrawer = () => {
    open.value = !open.value
    needDrawer.value = open.value
    nextTick(() => {
        right.value = open.value ? getComputedStyle(drawer.value!).width : '0'
    })
}
/** 关闭抽屉 */
const closeDrawer = () => {
    if (open.value) {
        right.value = '0'
        open.value = false
        needDrawer.value = false
    }
}
// 更改锁定状态
const changeLock = () => {
    if (open.value) return closeDrawer()
    store.changeLayerState(props.layer.id, { userLock: !props.layer.userLock })
}
// 更改可视状态
const changeVisible = () => {
    if (open.value) return closeDrawer()
    store.changeLayerState(props.layer.id, { visible: !props.layer.visible })
}

// 删除这个图层
const store = useControllerStore()
const deleteLayer = () => {
    store.deleteLayer(props.layer)
    console.log('删除数据');
}
</script>